Vue.component("top-bar", {
    data: function () {
        return {
            topData: {
                CommonName: '上海新帑实业有限公司',
                HeadImg: '../img/defaultImg.png',
                YourName: '你的名字'
            },
        }
    },
    //template: "<div class=\"headCommon\">\n     <div class=\"zumaLeft\">\n      <div class=\"imgBox-logo\"><img src=\"../img/zumaLogo.png\" class=\"zumaLogo\" /></div>\n      \n      <section style=\"display:inline-block;\" class=\"zuma\">\n         <img src=\"../img/zumaLogo2.png\">\n         <span>zuma.com</span>\n      </section>\n\n      <div class=\"CommonName\"> {{topData.CommonName}}   <span>\u516C\u4F17\u53F7\uFF1AMaster\u540D\u817E\uFF08\u670D\u52A1\u53F7\uFF09</span> </div>\n     </div>\n    \n    <div class=\"zumaRight\">\n      <div class=\"imgBox-headImg\"><img :src=\"topData.HeadImg\" class=\"zumaHeadImg\" /></div>\n      <div class=\"YourName\">{{topData.YourName}} </div>\n    </div>\n    \n    </div>",
    template:
        '<div class="headCommon">' +
        '<div class="zumaLeft">' +
        '<div class="imgBox-logo"><img src="../img/zumaLogo.png" class="zumaLogo" /></div>' +
        '<section style="display:inline-block;" class="zuma">' +
        '<img src="../img/zumaLogo2.png">' +
        '<span>zuma.com</span>' +
        '</section>' +
        '<div class="CommonName"> {{topData.CommonName}}   <span>公众号：Master名腾（服务号）</span> </div>' +
        '</div>' +
        '<div class="zumaRight">' +
        '<div class="imgBox-headImg"><img :src="topData.HeadImg" class="zumaHeadImg" /></div>' +
        '<div class="YourName">{{topData.YourName}} </div>' +
        '</div>' +
        '</div>',
    // `<div class="headCommon">
    //  <div class="zumaLeft">
    //   <div class="imgBox-logo"><img src="../img/zumaLogo.png" class="zumaLogo" /></div>

    //   <section style="display:inline-block;" class="zuma">
    //      <img src="../img/zumaLogo2.png">
    //      <span>zuma.com</span>
    //   </section>

    //   <div class="CommonName"> {{topData.CommonName}}   <span>公众号：Master名腾（服务号）</span> </div>
    //  </div>

    // <div class="zumaRight">
    //   <div class="imgBox-headImg"><img :src="topData.HeadImg" class="zumaHeadImg" /></div>
    //   <div class="YourName">{{topData.YourName}} </div>
    // </div>

    // </div>`,
    props: ['topshuju'],//这里的不能用驼峰命名
    created: function () {

        console.log(this.topshuju, '????')
        if(this.topshuju){
            this.topData = this.topshuju
        }
        const head = document.getElementsByTagName('head')[0];
        const css = document.getElementById('topBar_css');

        if (!css) {
            const style = document.createElement('style');
            let styleStr = '.headCommon{' +
                'background:#2A3542;' +
                'with:100%;' +
                'height:100px;' +
                'padding:0 80px; ' +
                'display:flex;' +
                'justify-content:space-between;' +
                '}'+
            '.zumaLeft{' +
                'display:inline-block;' +
                '}' +
                '.imgBox-logo,.imgBox-headImg{' +
                'line-height:100px;' +
                'display:inline-block;' +
                '}' +
                '.zumaLogo{' +
                'width:50px;' +
                'height:45px;' +
                'vertical-align: middle;' +
                'line-height:100px;' +
                'margin-right:10px;' +
                '}' +
                '.zuma{' +
                'color:#fff;' +
                'position:relative;' +

                '}' +
                '.zuma img{' +
                'width:70px;' +
                'height:20px;' +
                '}' +
                '.zuma span{' +
                'position:absolute;' +
                'left:0;' +
                'bottom:-14px;' +
                '}' +
                '.CommonName{' +
                'line-height:100px;' +
                'color:#fff;' +
                'display:inline-block;' +
                'font-size:13px;' +
                'margin-left:50px;' +
                '}' +
                '.CommonName span{' +

                'border-left:1px solid #fff;' +
                'border-right:1px solid #fff;' +
                'padding:0 20px;' +
                'margin-left:10px;' +
                '}' +
                '.zumaRight{}' +
                '.zumaHeadImg{' +
                'width:36px;' +
                'height:36px;' +
                'vertical-align: middle;' +
                'margin-right:5px;' +
                'cursor:pointer;' +
                '}' +
                '.YourName{' +
                'line-height:100px;' +
                'color:#fff;' +
                'font-size:16px;' +
                'display:inline-block;' +
                'cursor:pointer;' +
                '}'
            style.innerHTML = styleStr;
            style.id = 'topBar_css'
            head.appendChild(style)
        }
        // if(!css){
        //     const style = document.createElement('style')
        //     style.innerHTML = `
        //         .headCommon{
        //             background:#2A3542;
        //             with:100%;
        //             height:100px;
        //             padding:0 80px;   
        //             display:flex;
        //             justify-content:space-between;
        //         }
        //         .zumaLeft{
        //             display:inline-block;
        //         }
        //         .imgBox-logo,.imgBox-headImg{
        //             line-height:100px;
        //             display:inline-block;
        //         }
        //         .zumaLogo{
        //             width:50px;
        //             height:45px;
        //             vertical-align: middle;
        //             line-height:100px;
        //             margin-right:10px;
        //         }
        //         .zuma{
        //             color:#fff;
        //              position:relative;

        //         }
        //         .zuma img{
        //             width:70px;
        //             height:20px;
        //         }
        //         .zuma span{
        //             position:absolute;
        //             left:0;
        //             bottom:-14px;
        //         }
        //         .CommonName{
        //             line-height:100px;
        //             color:#fff;
        //             display:inline-block;
        //             font-size:13px;
        //             margin-left:50px;
        //         }
        //         .CommonName span{

        //             border-left:1px solid #fff;
        //             border-right:1px solid #fff;
        //             padding:0 20px;
        //             margin-left:10px;
        //         }
        //         .zumaRight{

        //         }
        //         .zumaHeadImg{
        //             width:36px;
        //             height:36px;
        //             vertical-align: middle;
        //             margin-right:5px;
        //             cursor:pointer;
        //         }
        //         .YourName{
        //             line-height:100px;
        //             color:#fff;
        //             font-size:16px;
        //             display:inline-block;
        //             cursor:pointer;
        //         }



        //     `;
        //     style.id = 'topBar_css'
        //     head.appendChild(style)
        // }
    },
    methods:{
        ce:function(){
            alert(123113)
        }
    }

})